<script setup>

import {ref} from 'vue'

// 创建响应式数据，控制弹窗显示状态（默认不显示）
const showModal = ref(false)

// 显示大图函数 - 点击图片时触发
const showEnlargedImage = () => {
  // 将弹窗状态设置为true，显示大图弹窗
  showModal.value = true
}

// 关闭大图函数 - 点击弹窗背景时触发
const closeEnlargedImage = () => {
  // 将弹窗状态设置为false，隐藏大图弹窗
  showModal.value = false
}
</script>

<template>
  <view class="main">

    <view class="bj">
      <text class="tip">
        <image class="img" src="/static/image/tip.png"></image>
        可关注“成电智慧学工”服务号获取审批通知
      </text>
    </view>
    <view class="input">
      <view class="item-header">
        <text claass="item-name">LUXINPEI</text>
        <text claass="item-id">2413045739</text>
      </view>
      <!--    申请时间-->
      <view class="item-apply-time">申请时间：2025-9-12-15:00:00</view>
      <!--    专业-->
      <view class="item-major">软件工程</view>
      <view class="item-footer">
        <view class="item-avatar">头像</view>
        <text class="item-status">申请成功</text>
      </view>
    </view>
    <view class="input2">
      <!--    第二个框-->

      <view class="time">
        <b>离校时间：</b><br>
        2025-9-12-15:00:00
      </view>
      <view class="dizhi">
        <b>家庭地址：</b><br>
        山西省大同市云岗区
      </view>
      <view class="xxdizhi">
        <b>详细地址：</b><br>
        朝阳小区2单元3号楼
      </view>
      <view class="liyou">
        <b>申请理由：</b><br>
        回家学习
      </view>
      <view class="book">
        <b>家长知情确认书：</b><br>

        <!-- 点击图片显示大图 - 添加点击事件监听 -->
        <view id="img1" @click="showEnlargedImage">
          <!-- logo图片 -->
          <image class="tp" src="/static/image/book.jpeg"></image>
        </view>

        <!-- 大图弹窗 - 使用v-if条件渲染，当showModal为true时显示 -->
        <view v-if="showModal" class="modal" @click="closeEnlargedImage">
          <!-- 弹窗中的大图 -->
          <image class="modal-image" src="/static/image/book.jpeg"></image>

        </view>

      </view>
      <view class="dj">点击图片支持放大</view>
    </view>
    <view class="input3">
      <!--    第3个框-->

      <view>
        <b>乘车日期：</b><br>
        2025-9-12
      </view>
      <view>
        <b>乘车点：</b><br>
        新校区
      </view>
      <view>
        <b>送站目的地：</b><br>
        天府国际机场
      </view>
      <view>
        <b>班次：</b><br>
        22：00
      </view>

    </view>
    <view class="input4">
      <!--    第4个框-->

      <view>
        <b>出发地：</b><br>
        电子科技大学
      </view>
      <view>
        <b>详细地址：</b><br>
        新校区东门
      </view>
      <view>
        <b>预计到达时间：</b><br>
        2025-9-13-15:00:00
      </view>
      <view>
        <b>交通工具：</b><br>
        驾车
      </view>
      <view>
        <b>交通信息：</b><br>
        AE86
      </view>
      <view>
        <b>行程开始时间：</b><br>
        2025-9-12-18:00:00
      </view>
      <view>
        <b>结束时间：</b><br>
        2025-9-13-15:00:00
      </view>


    </view>
  </view>
</template>

<style scoped>
.main {
  height: 1600px;
  width: 100%;
  background-color: rgba(239, 239, 244, 1);

}

.bj {
  width: 100%;
  height: 28px;
  background: #DEE9FF;
  padding: 8px;
}

/*文本样式*/
.tip {
  font-weight: 400;
  font-size: 12px;

  letter-spacing: 0; /*字体间距*/
  display: flex;
  align-items: center;
}

/*图片样式*/
.img {
  width: 16px;
  height: 16px;
  top: 3px;
}

.input {
  height: 170px;
  background-color: white;
  padding: 15px;
  margin: 10px;

}

.item-header {
  display: flex;
  justify-content: space-between;
  margin: 8px;
}

.item-name {
  font-weight: bold;
  font-size: 16px;
}

.item-id {
  color: #999;
  font-size: 14px;
}

.item-apply-time {
  color: orange;
  font-size: 14px;
  margin: 8px;
}

.item-major {
  margin: 8px;
  color: #999;
  font-size: 14px;
}

.item-footer {
  display: flex;
  align-items: center;
}

.item-avatar {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 50%; /* 圆形头像 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  font-size: 12px;
}

.item-status {
  color: green;
  margin-right: 10px;
}

.item-action {
  color: #999;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.input2 {
  height: 470px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 1);
  font-weight: 400;
  font-style: normal;
  font-size: large;

  margin: 10px 10px;
}

/* logo图片容器样式 - 用于居中显示 */
.img1 {
  display: flex; /* 使用弹性布局 */
  justify-content: center; /* 水平居中对齐 */
  cursor: pointer; /* 鼠标悬停时显示手型光标，提示可点击 */

}

/* logo图片样式设置 */
.tp {
  width: 150px; /* 设置图片宽度为150像素 */
  height: 150px; /* 设置图片高度为150像素 */
  /* 距离容器顶部100像素 */
}


/* 弹窗样式 */
.modal {
  position: fixed; /* 固定定位 */
  top: 0; /* 距离顶部0像素 */
  left: 0; /* 距离左侧0像素 */
  width: 100%; /* 宽度占满整个屏幕 */
  height: 100%; /* 高度占满整个屏幕 */
  background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
  display: flex; /* 使用弹性布局 */
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  z-index: 1000; /* 设置层级，确保弹窗在最上层 */
}

/* 弹窗中的大图样式 */
.modal-image {
  max-width: 80%; /* 最大宽度为屏幕的80% */
  max-height: 80%; /* 最大高度为屏幕的80% */
}

.dj {
  color: #999999;
}

.input3 {
  height: 230px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 1);
  font-weight: 400;
  font-style: normal;
  font-size: large;

  margin: 10px 10px;
}

.input4 {
  height: 370px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 1);
  font-weight: 400;
  font-style: normal;
  font-size: large;

  margin: 10px 10px;
}

</style>